import React, {useState} from "react";
import {Table, Pagination} from 'antd'

interface ITablePanelProps {
    tableData: any[]
    headers: any[]
    isMultiSelect?: boolean
    isHasOperateColumn?: boolean,
    total?: number
    operateColumnWidth?: number,
    paginationChange: (params: IParams) => void
}

interface IParams {
    pageNum: number,
    pageSize: number
}

const TablePanel: React.FC<ITablePanelProps> = (props) => {

    let [paginationParams, setPaginationParams] = useState({
        pageSize: 10,
        pageNum: 1
    })
    const onChange = (pageNum: number, pageSize: number) => {
        setPaginationParams({...paginationParams, pageNum, pageSize})
        props.paginationChange({pageNum, pageSize})
    }

    return <div className="table-panel">
        <Table columns={props.headers} dataSource={props.tableData} pagination={false}></Table>
        <Pagination total={props.total} onChange={onChange} showSizeChanger showQuickJumper
                    pageSize={paginationParams.pageSize} current={paginationParams.pageNum}/>
    </div>
}

export default TablePanel

export type {IParams}
